<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div>
            <a href="#" class="iconfont iconmagnifier" style="color: black;font-weight: 800"></a>
            <input type="text" class="ipt" placeholder="搜索">
        </div>
        <a href="recommend.html" style="font-size:0.35rem;line-height: 0.6rem;color: #fff;">取消</a>
    </header>

    <!-- 内容区域 -->
    <section>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">工具</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.13rem 0.2rem;">
                    <span>水彩</span><span>彩铅</span>
                    <span>钢笔</span><span>水粉</span>
                    <span>马克笔</span><span>圆珠笔</span>
                    <span>丙烯</span><span>油面</span>
                    <span>国画写意</span><span>国画工笔</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">其他</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>插画</span><span>绘本</span>
                    <span>时尚</span><span>手作</span>
                    <span>漫画</span><span>卡通</span>
                    <span>舞蹈</span><span>拓印</span>
                    <span>乐器</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">学习方式</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>想学</span><span>想画</span>
                    <span>想听</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">流派</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>抽象</span><span>写实</span>
                    <span>古典</span><span>当代</span>
                    <span>印象</span><span>西方</span>
                    <span>传统</span><span>现实主义</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">类型</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>技法</span><span>解读</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.1rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">对象</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>风景</span><span>人像</span>
                    <span>静物</span><span>动物</span>
                    <span>山水</span><span>花鸟</span>
                    <span>书法</span>
                </p>
            </div>
        </div>
        <div style="width:6.6rem;height: 1.8rem;margin-left: 0.26rem;margin-top: 0.3rem;">
            <h5 style="font-size: 0.3rem;width: 100%;height: 0.5rem;">搜索历史</h5>
            <div style="width:100%;height:1.2rem;display: flex;flex-direction: row;">
                <p style="display: flex;flex-wrap: wrap;margin: 0.1rem 0.2rem;">
                    <span>枯枝水墨线下活动</span><span>枯枝水墨</span>
                </p>
            </div>
        </div>
    </section>

</body>

</html>